import React from 'react';
import ReactDOM from "react-dom";

import {
    FileExplorer,
    CodeEditor,
    Preview,
    SandpackProvider,
} from 'react-smooshpack';
// import 'react-smooshpack/dist/styles.css';

const files = {
    '/App.js': {
        code: `
import React, {useState, useEffect, useRef} from 'react';
import * as echarts from 'echarts'

export default function App() {
  const [count, updateCount] = useState(0);
  const divRef = useRef();
  useEffect(()=>{
    var myChart = echarts.init(divRef.current);
    myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
  }, []);
  
  return <>
        <h1>{count}<button onClick={()=>updateCount(count+1)}>add</button></h1>
        <div ref={divRef} style={{ width: 400, height: 400 }}></div>
  </>
}
        `,
    },
    '/index.js': {
        code: `
import { render } from 'react-dom';
import React from 'react';
import App from './App.js';
import './styles.css';

render(<App />, document.getElementById('root'))
        `,
    },
    '/styles.css': {
        code: `   
body {
    font-family: sans-serif;
    -webkit-font-smoothing: auto;
    -moz-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: auto;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

h1 {
    font-size: 1.5rem;
}  
        `,
    },
    '/public/index.html': {
        code: `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>        
        `,
    },
};

const dependencies = {
    react: 'latest',
    'react-dom': 'latest',
    'react-refresh': 'latest',
    '@babel/runtime': 'latest',
    'echarts': 'latest'
};

const App = () => (
    <SandpackProvider files={files} dependencies={dependencies} entry="/index.js" activePath={"/App.js"} showOpenInCodeSandbox={false}>
        <div style={{display: 'flex', height: 600}}>
            <FileExplorer customStyle={{width: 300}}/>
            <CodeEditor customStyle={{flex: 1}} showLineNumbers={true} showTabs={false}/>
            <Preview customStyle={{flex: 1}} showNavigator={false}/>
        </div>
    </SandpackProvider>
);


const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
